<template>
  <div class="raffle-container">
    <!-- 卡片区域 - 从SubNav.vue移植过来 -->
    <div class="bean-cards-container">
      <!-- 我的京豆卡片 -->
      <div class="bean-card">
        <div class="card-header">
          <span class="title">我的京豆</span>
          <span class="link">京豆说明</span>
        </div>
        <div class="card-content">
          <div class="bean-info">
            <div class="bean-number">11</div>
            <img :src="goldDou" alt="京豆" class="bean-icon">
            <div class="discount">可抵￥0.11</div>
          </div>
          <div class="card-footer">
            <div class="footer-text">京豆下单可抵现金</div>
          </div>
        </div>
      </div>

      <!-- 签到领京豆卡片 -->
      <div class="bean-card signin-card">
        <div class="card-header">
          <span class="title">签到领京豆</span>
          <span class="link">如何领京豆</span>
        </div>
        <div class="card-content">
          <div class="signin-progress">
            <!-- 签到进度条 -->
            <div class="progress-bar">
              <div class="progress-step completed">
                <div class="step-icon">✓</div>
                <div class="step-text">连签1天</div>
              </div>
              <div class="progress-line"></div>
              <div class="progress-step">
                <div class="step-icon"></div>
                <div class="step-text">明天</div>
              </div>
              <div class="progress-line"></div>
              <div class="progress-step">
                <div class="step-icon plus">+10</div>
                <div class="step-text">后天可领</div>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <button class="signin-button">赚更多京豆</button>
          </div>
        </div>
      </div>

      <!-- 京东游戏大厅卡片 -->
      <div class="bean-card game-card">
        <div class="card-header">
          <span class="title">京东游戏大厅</span>
        </div>
        <div class="card-content">
          <div class="game-items">
            <div class="game-item">
              <div class="game-icon">🎮</div>
              <div class="game-text">精选推荐</div>
            </div>
            <div class="game-item">
              <div class="game-icon">🔥</div>
              <div class="game-text">热门新游</div>
            </div>
            <div class="game-item">
              <div class="game-icon">🎁</div>
              <div class="game-text">海量福利</div>
            </div>
          </div>
          <div class="card-footer">
            <button class="goto-button">立即前往 <span class="arrow">→</span></button>
          </div>
        </div>
      </div>
    </div>

    <!-- 抽奖部分 - 原有内容 -->
    <div class="raffle-section">
      <!-- 顶部标题区域 -->
      <div class="raffle-header">
        <div class="title">天天抽奖</div>
        <div class="notification">
          <i class="bell-icon">🔔</i>
          <span class="user-info">恭喜0***q抽中红包</span>
        </div>
        <div class="rules">活动规则</div>
      </div>

      <!-- 主要内容区域 -->
      <div class="raffle-content">
        <!-- 中间宝箱区域 -->
        <div class="treasure-box-container">
          <div class="treasure-box" :class="{ 'animate': isAnimating, 'disabled': chances <= 0 }" ref="treasureBox">
            <!-- 宝箱图片可以用背景图或者直接放一个图片 -->
          </div>
          <div class="chance-info" :class="{ 'no-chance': chances <= 0 }">剩余{{ chances }}次</div>
          <button 
            class="draw-button" 
            :class="{ 'disabled': chances <= 0 }" 
            :disabled="chances <= 0" 
            @click="startDraw"
          >
            {{ chances <= 0 ? '明日再来' : '立即开奖' }}
          </button>
          <div class="chance-tip" v-if="chances <= 0">今日抽奖次数已用完，明天再来吧~</div>

          <!-- 仅在开发环境下显示的测试按钮 -->
          <button
            class="reset-button"
            @click="resetChances"
            style="margin-top: 15px; padding: 8px 20px; background-color: #666; color: white; border: none; border-radius: 15px; cursor: pointer;"
          >
            重置抽奖次数(仅测试)
          </button>
        </div>

        <!-- 右侧奖品列表 -->
        <div class="prize-list-container">
          <div class="prize-header">今日奖品</div>
          <div class="prize-items">
            <div class="prize-item" v-for="(item, index) in prizeList" :key="index">
              <div class="prize-icon" :class="item.iconClass"></div>
              <div class="prize-info">
                <div class="prize-name">{{ item.name }}</div>
                <div class="prize-desc" v-if="item.desc">{{ item.desc }}</div>
              </div>
              <div class="prize-status" :class="item.status">{{ item.statusText }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import goldDou from '../../../assets/imgs/signin/gold_douzi.png';

// 控制宝箱动画状态
const isAnimating = ref(false);
const treasureBox = ref(null);

// 抽奖次数
const chances = ref(0);

// 奖品列表
const prizeList = ref([
  { 
    name: '188元红包', 
    desc: '剩余8888个',
    iconClass: 'red-packet',
    status: 'available',
    statusText: '可抽' 
  },
  { 
    name: '京豆', 
    desc: '最多8888个',
    iconClass: 'bean',
    status: 'available',
    statusText: '可抽' 
  },
  { 
    name: '优惠券', 
    desc: '满199元可用',
    iconClass: 'coupon',
    status: 'available',
    statusText: '可抽' 
  },
  { 
    name: '满减券', 
    desc: '满99减10',
    iconClass: 'coupon',
    status: 'available',
    statusText: '可抽' 
  },
  { 
    name: '谢谢参与', 
    iconClass: 'none',
    status: 'unavailable',
    statusText: '已抽' 
  }
]);

// 开始抽奖
const startDraw = () => {
  if (chances.value <= 0) {
    // 显示提示信息
    alert('您的抽奖次数已用完，请明天再来！');
    return;
  }

  // 开始动画
  isAnimating.value = true;

  // 模拟抽奖过程
  setTimeout(() => {
    // 停止动画
    isAnimating.value = false;

    // 随机抽取奖品
    const prizes = ['京豆', '红包', '优惠券', '谢谢参与'];
    const randomIndex = Math.floor(Math.random() * prizes.length);
    const prize = prizes[randomIndex];

    // 显示抽奖结果
    alert(`恭喜您抽中了: ${prize}`);

    // 减少抽奖次数
    chances.value--;
  }, 2000); // 动画持续2秒
};

// 重置抽奖次数（仅用于测试）
const resetChances = () => {
  chances.value = 3;
};

// 组件挂载时初始化
onMounted(() => {
  // 模拟从服务器获取抽奖次数
  chances.value = 3; // 修改为3次，用于测试抽奖功能

  // 初始时短暂播放一次动画
  isAnimating.value = true;
  setTimeout(() => {
    isAnimating.value = false;
  }, 1000);
});
</script>

<style scoped lang="scss">
.raffle-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 30px;
}

/* 卡片区域样式 - 从SubNav.vue移植过来 */
.bean-cards-container {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
  
  .bean-card {
    background-color: #fff;
    border-radius: 8px;
    border: 1px dashed rgb(245, 151, 148);
    background-image: url('../../../assets/imgs/signin/douzi_bgimg.png') left top/100% 100% no-repeat;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 220px;

    .card-header {
      display: flex;
      justify-content: space-between;
      padding: 12px 15px;
      border-bottom: 1px solid #f0f0f0;

      .title {
        font-size: 16px;
        font-weight: 700;
      }

      .link {
        font-size: 14px;
        color: #e1251b;
        cursor: pointer;
      }
    }

    .card-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 15px;

      .bean-info {
        display: flex;
        align-items: center;

        .bean-number {
          font-size: 42px;
          color: #e1251b;
          font-weight: bold;
          line-height: 1;
        }

        .bean-icon {
          width: 36px;
          height: 36px;
          margin: 0 8px;
        }

        .discount {
          font-size: 12px;
          color: #fff;
          background-color: #ff5c5c;
          padding: 2px 6px;
          border-radius: 10px;
        }
      }

      .signin-progress {
        width: 100%;
        margin-bottom: 20px;

        .progress-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 0;

          .progress-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;

            .step-icon {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              background-color: #f0f0f0;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-bottom: 8px;
              color: #fff;
              font-size: 14px;

              &.plus {
                background-color: #fff4d6;
                color: #ff8f1f;
                font-weight: bold;
              }
            }

            .step-text {
              font-size: 12px;
              color: #666;
            }

            &.completed .step-icon {
              background-color: #e1251b;
              color: white;
            }
          }

          .progress-line {
            flex: 1;
            height: 4px;
            background-color: #f0f0f0;
            position: relative;
            z-index: 1;
            margin: 0 10px;

            &:first-of-type {
              background-color: #e1251b;
            }
          }
        }
      }

      .game-items {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;

        .game-item {
          display: flex;
          align-items: center;

          .game-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            background-color: #f9f9f9;
            border-radius: 4px;
          }

          .game-text {
            font-size: 14px;
          }
        }
      }
    }

    .card-footer {
      text-align: center;

      .footer-text {
        margin-top: 20px;
        font-size: 14px;
        color: #666;
      }

      .signin-button {
        width: 100%;
        padding: 10px;
        background-color: #e1251b;
        color: white;
        border: none;
        border-radius: 20px;
        cursor: pointer;
        font-size: 14px;

        &:hover {
          background-color: #c1151b;
        }
      }

      .goto-button {
        padding: 6px 15px;
        background-color: white;
        color: #e1251b;
        border: 1px solid #e1251b;
        border-radius: 20px;
        cursor: pointer;
        font-size: 14px;
        display: inline-flex;
        align-items: center;

        .arrow {
          margin-left: 4px;
          font-size: 16px;
        }

        &:hover {
          background-color: #fff0f0;
        }
      }
    }
  }
}

/* 抽奖部分样式 */
.raffle-section {
  width: 100%;
  min-height: 600px;
  background: linear-gradient(135deg, #ffebf2 0%, #fff0f5 100%);
  position: relative;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  border-radius: 8px;
  
  // 放射状背景
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 192, 203, 0.2) 100%);
    z-index: 0;
  }
  
  // 放射线背景
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.5) 0deg 10deg, rgba(255, 192, 203, 0.3) 10deg 20deg);
    z-index: 0;
    opacity: 0.3;
  }
}

.raffle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  position: relative;
  z-index: 1;
  
  .title {
    font-size: 20px;
    font-weight: bold;
    color: #e1251b;
  }
  
  .notification {
    display: flex;
    align-items: center;
    
    .bell-icon {
      margin-right: 5px;
      color: #e1251b;
    }
    
    .user-info {
      font-size: 14px;
      color: #666;
    }
  }
  
  .rules {
    font-size: 14px;
    color: #e1251b;
    cursor: pointer;
  }
}

.raffle-content {
  display: flex;
  justify-content: center;
  padding: 20px;
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.treasure-box-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 400px;

  .treasure-box {
    width: 200px;
    height: 200px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="20" y="30" width="60" height="50" fill="%238a2be2" /><rect x="30" y="20" width="40" height="10" fill="%23ff69b4" /><rect x="35" y="40" width="30" height="30" fill="%2300bfff" /></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 20px;
    position: relative;

    // 闪光效果
    &::before {
      content: '';
      position: absolute;
      top: -10%;
      left: -10%;
      right: -10%;
      bottom: -10%;
      background: linear-gradient(45deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.8) 50%,
        rgba(255,255,255,0) 100%);
      background-size: 200% 200%;
      animation: none;
      z-index: 2;
    }

    // 当动画激活时
    &.animate::before {
      animation: shine 1s linear infinite;
    }

    // 盒子边缘发光效果
    &::after {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      border-radius: 10px;
      background: linear-gradient(135deg, #00c6ff, #7b68ee, #ff758c);
      z-index: -1;
      filter: blur(10px);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    &.animate::after {
      opacity: 0.7;
      animation: pulse 2s ease-in-out infinite;
    }
    
    // 禁用状态
    &.disabled {
      opacity: 0.6;
      filter: grayscale(40%);
      
      &::after {
        background: linear-gradient(135deg, #aaa, #999, #bbb);
      }
    }
  }
  
  .chance-info {
    font-size: 14px;
    color: #ff8f00;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px 15px;
    border-radius: 15px;
    margin-bottom: 15px;
    
    &.no-chance {
      color: #999;
      background-color: rgba(240, 240, 240, 0.8);
    }
  }
  
  .chance-tip {
    margin-top: 10px;
    font-size: 14px;
    color: #999;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 8px 15px;
    border-radius: 20px;
    max-width: 250px;
  }
  
  .draw-button {
    padding: 12px 40px;
    background-color: #a239ca;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(162, 57, 202, 0.4);
    transition: all 0.3s ease;
    
    &:hover:not(.disabled) {
      background-color: #8e24aa;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(162, 57, 202, 0.6);
    }
    
    &:active:not(.disabled) {
      transform: translateY(1px);
      box-shadow: 0 2px 10px rgba(162, 57, 202, 0.4);
    }
    
    &.disabled {
      background-color: #ccc;
      color: #888;
      cursor: not-allowed;
      box-shadow: none;
    }
  }
}

// 右侧奖品列表样式
.prize-list-container {
  width: 300px;
  margin-left: 30px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  
  .prize-header {
    background-color: #f5f5f5;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
  }
  
  .prize-items {
    max-height: 400px;
    overflow-y: auto;
    
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    
    &::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 3px;
    }
  }
  
  .prize-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    
    &:last-child {
      border-bottom: none;
    }
    
    .prize-icon {
      width: 36px;
      height: 36px;
      border-radius: 5px;
      margin-right: 12px;
      flex-shrink: 0;
      position: relative;
      
      &.red-packet {
        background-color: #ff4d4f;
        
        &::after {
          content: '¥';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
          font-weight: bold;
        }
      }
      
      &.bean {
        background-color: #ffd666;
        border-radius: 50%;
      }
      
      &.coupon {
        background-color: #ff7a45;
        
        &::after {
          content: '券';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
          font-weight: bold;
        }
      }
      
      &.none {
        background-color: #d9d9d9;
      }
    }
    
    .prize-info {
      flex: 1;
      
      .prize-name {
        font-size: 14px;
        color: #333;
        margin-bottom: 4px;
      }
      
      .prize-desc {
        font-size: 12px;
        color: #999;
      }
    }
    
    .prize-status {
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 12px;
      
      &.available {
        background-color: #f6ffed;
        color: #52c41a;
        border: 1px solid #b7eb8f;
      }
      
      &.unavailable {
        background-color: #f5f5f5;
        color: #999;
        border: 1px solid #d9d9d9;
      }
    }
  }
}

// 闪光动画
@keyframes shine {
  0% {
    background-position: -200% -200%;
  }
  100% {
    background-position: 200% 200%;
  }
}

// 脉冲动画
@keyframes pulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.7;
    transform: scale(1);
  }
}

// 响应式调整
@media (max-width: 768px) {
  .bean-cards-container {
    grid-template-columns: 1fr;
  }
  
  .raffle-content {
    flex-direction: column;
    align-items: center;
  }
  
  .prize-list-container {
    width: 100%;
    margin-left: 0;
    margin-top: 20px;
  }
}
</style>
